<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Listing 5.6</title>
    <script type="text/javascript" src="../scripts/assert.js"></script>
    <link href="../styles/assert.css" rel="stylesheet" type="text/css">
    <style type="text/css">
      #box { position: absolute; border: 3px solid blue; width: 200px; height: 200px; background-color: #6495ed; font-size: 2em; }
    </style>
  </head>
  <body>
    <div id="box">ボックス</div>                               <!--#1-->

    <script type="text/javascript">

      function animateIt(elementId) {

        var elem = document.getElementById(elementId);              //#2
        var tick = 0;                                               //#3

        var timer = setInterval(function(){                         //#4
          if (tick < 100) {
            elem.style.left = elem.style.top = tick + "px";
            tick++;
          }
          else {
            clearInterval(timer);
            assert(tick == 100,                                      //#5
                   "Tick accessed via a closure.");
            assert(elem,
                   "Element also accessed via a closure.");
            assert(timer,
                   "Timer reference also obtained via a closure." );
          }
        }, 10);

      }

      animateIt('box');                                               //#6

    </script>
  </body>
</html>

